import React, { useState, useEffect } from 'react';
import './management.less';
import { Button, Table, Modal, Space, Drawer } from 'antd';
import Image from '../../static/images/BBD房子.png';
import axios from '../../utils/request';
import moment from 'moment';
export default function System() {
  const [member, setmember] = useState([]);
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const showmember = async () => {
    let { data } = await axios.get('/cxy/getMember');
  };
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [showdata, setshowdata] = useState({
    _id: '',
    device_id: {
      _id: '',
      deviceimg: '',
      deviceModel: '',
      size: 0,
      waterproof: '',
      quality: '',
      maintenance: 2,
      num: 1,
      price: 999,
      deviceKinds_id: {
        _id: '',
        device_name: '',
      },
      deviceStatus: 0,
    },
    year: 1,
    begin_time: '',
    end_time: '',
    leaseStatus: 0,
    capacity: 0,
    runningState: false,
    revorname: '',
    phone: '1',
    address: '1',
    serve: true,
    content: '1',
    num: 2,
  });
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const update = async (id) => {
    let { data } = await axios.get('/zhy/exit_device/' + id);
    setIsModalOpen(true);
    setshowdata(data);
    console.log(data);
  };
  const columns = [
    {
      title: '订单编号',
      dataIndex: '_id',
    },
    {
      title: '申请时间',
      dataIndex: 'begin_time',
      render: (text) => <>{moment(text).format('YYYY-MM-DD')}</>,
    },
    {
      title: '租借年份(年)',
      dataIndex: 'year',
    },
    {
      title: '到期时间',
      dataIndex: 'end_time',
      render: (text) => <>{moment(text).format('YYYY-MM-DD')}</>,
    },
    {
      title: '租借状态',
      dataIndex: 'leaseStatus',
      render: (text) => (
        <>
          {text == 0 ? (
            <a>申请通过</a>
          ) : text == 1 ? (
            <a>物流运输中</a>
          ) : text == 2 ? (
            <a>已安装</a>
          ) : text == 4 ? (
            <a>即将过期</a>
          ) : (
            <a>已过期</a>
          )}
        </>
      ),
    },
    {
      title: '位置信息',
      dataIndex: 'address',
    },
    {
      title: '运行状态',
      render: (_, record) => (
        <>
          {record.runningState == true ? (
            <span>已运行({record.capacity}%)</span>
          ) : (
            '未运行'
          )}
        </>
      ),
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space size="middle">
          <Button
            style={{ width: '85px', background: '#32325d', color: 'white' }}
            onClick={() => {
              update(record._id);
            }}
          >
            查看详情
          </Button>
          <Button
            style={{ background: '#5e72e4', color: 'white' }}
            onClick={showDrawer}
          >
            回收
          </Button>
        </Space>
      ),
    },
  ];
  const [data, setdata] = useState([]);
  useEffect(() => {
    show();
  }, []);
  const show = async () => {
    let { data } = await axios.get('/zhy/deviceList');
    console.log(data);
    setdata(data);
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);
  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="quan_1">
      <div className="quan_2">
        <div className="header_1"></div>
        <div className="bottom_1"></div>
        <div className="ding1_1">
          <div className="headerding_1">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                门店管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>设备管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>设备申请</li>
            </ul>
          </div>
          <div className="ding_2_form">
            <div className="ding_2_header">
              <div className="title">设备管理</div>
              <div className="box_button">
                <Button
                  type="primary"
                  style={{ width: '90px', background: '#5e72e4' }}
                >
                  {' '}
                  搜索
                </Button>
              </div>
            </div>
            <div className="box_contents">
              <div
                style={{
                  marginBottom: 0,
                }}
              >
                <span
                  style={{
                    marginLeft: 8,
                  }}
                ></span>
              </div>
              <Table columns={columns} dataSource={data} />
              <Modal
                title="设备详情"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                width={900}
                cancelText="续费"
                okText="回收"
              >
                <h3
                  style={{
                    marginLeft: '5px',
                    fontWeight: 'bold',
                  }}
                >
                  设备信息
                </h3>
                <table style={{ marginLeft: '5px' }}>
                  <tr style={{ height: '60px' }}>
                    <td>设备编号:</td>
                    <td style={{ width: '180px' }}>
                      {showdata.device_id.deviceModel}
                    </td>
                    <td>设备型号:</td>
                    <td style={{ width: '180px' }}>
                      {showdata.device_id.deviceKinds_id.device_name}
                    </td>
                    <td>租借年份(年):</td>
                    <td style={{ width: '180px' }}>{showdata.year}</td>
                  </tr>
                  <tr>
                    <td>申请时间:</td>
                    <td style={{ width: '180px' }}>
                      {' '}
                      {moment(showdata.begin_time).format('YYYY-MM-DD')}
                    </td>
                    <td>到期时间:</td>
                    <td style={{ width: '180px' }}>
                      {moment(showdata.end_time).format('YYYY-MM-DD')}
                    </td>
                    <td>租借状态:</td>
                    <td style={{ width: '180px', color: 'green' }}>租借正常</td>
                  </tr>
                  <tr style={{ height: '60px' }}>
                    <td>设备位置:</td>
                    <td style={{ width: '280px' }}>{showdata.address}</td>
                  </tr>
                </table>
                <h3
                  style={{
                    marginLeft: '5px',
                    fontWeight: 'bold',
                  }}
                >
                  回收信息
                </h3>
                <table style={{ marginLeft: '5px' }}>
                  <tr style={{ height: '60px' }}>
                    <td>当前容量:</td>
                    <td style={{ width: '180px' }}>{showdata.capacity}%</td>
                  </tr>
                </table>
              </Modal>
              <Drawer
                title="收货员选择"
                placement="right"
                onClose={onClose}
                open={open}
              >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
              </Drawer>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
